html
html
http://www.khayma.com/hpinarabic/htutor01.html
pdf
HTML
<HTML>
<
/HTML>
<HEAD>
<
/HEAD>
<TITLE>
<
/TITLE>
<BODY>
<
/BODY>
Html
Html
HTML
/HTML
HEAD
TITLE
/TITLE
/HEAD
BODY
/BODY
<HTML>
<HEAD>
<TITLE>
This is a test Webpage
<
/TITLE>
<
/HEAD>
<BODY>
Wow, I'm writing my first webpage
<
/BODY>
<
/HTML>
HTML
htm
html
1st_file.htm
C:\htmfiles
Netscape
Navigator
Open
File
File
MS Internet Explorer
Open
File
C:\htmfiles\1st_file.htm
UPPERCASE
lowercase
Enter
Html
<HTML><HEAD><TITLE> This is a test Webpage </TITLE></HEAD><BODY>
Wow, I'm writing my first webpage </BODY></HTML>
<HTML>
<HEAD>
<TITLE>
This
is a
test
Webpage
<
/TITLE>
<
/HEAD>
<BODY>
Wow,
I'm
writing
my
first
webpage
<
/BODY>
<
/HTML>
<HTML> <HEAD> <TITLE>
This is a test Webpage
<
/TITLE>
<
/HEAD>
<BODY>
Wow, I'm writing my first webpage
<
/BODY>
<
/HTML>
BR
<HTML>
<HEAD>
<TITLE>
This is a test Webpage
<
/TITLE>
<
/HEAD>
<BODY>
Wow, <BR> I'm writing my <BR>
first webpage
<
/BODY>
<
/HTML>
P
<HTML>
<HEAD>
<TITLE>
This is a test Webpage
<
/TITLE>
<
/HEAD>
<BODY>
Wow, <P> I'm writing my <P>
first webpage
<
/BODY>
<
/HTML>
nbsp;
Non Breakable Space
<HTML>
<HEAD>
<TITLE>
This is a test Webpage
<
/TITLE>
<
/HEAD>
<BODY>
Wow,
I'm writing
my first webpage
<
/BODY>
<
/HTML>
HTML
HTML
BODY
BODY
/BODY
Attribute
<BODY BGCOLOR="FFFFFF">
...
<
/BODY>
BGCOLOR
BODY
FFFFFF
CC
FFFFFF
A,B,C,D,E,F
FF
FF
FF
FF
CC
ABCDEF
FFFF00
FEDCBA
336699
773466
112233
FF1122
666666
0033FF
663333
AABBAA
00FF00
800800
FF6600
008008
993366
020769
123456
111111
654321
Black
White
Red
Green
Marron
Purple
Navy
Blue
Teal
Lime
Gray
Silver
Olive
Aqua
Fuchsia
Yellow
<BODY BGCOLOR="#FFFFFF" BACKGROUND="image.jpg">
...
<
/BODY>
BACKGROUND
image.jpg
BGCOLOR
Text-Based Browsers
BODY
Links
TEXT="#rrggbb"
LINK="#rrggbb"
VLINK="#rrggbb"
visited
links
ALINK="#rrggbb"
active links
<BODY BACKGROUND="backimag.jpg"
BGCOLOR="#ffff00"
TEXT="#000066"
LINK="#00ff00"
VLINK="#ff0000"
ALINK="#999999">
backimag.jpg
HTML
Times New
Roman
FONT
FONT
Face
<FONT FACE="Traditional Arabic, Arabic Transparent,
Simplified Arabic">
... Text ...
<
/FONT>
Color
<FONT COLOR="#FF0000">
... Text ...
<
/FONT>
Size
<FONT SIZE="4">
... Text ...
<
/FONT>
<FONT SIZE="+4">
... Text ...
<
/FONT>
<FONT FACE="arial" SIZE="6" COLOR="#FF0000">
This font is Arial, Size is 6, Color is Red
<
/FONT>
This font is Arial, Size is 6, Color is Red
<FONT FACE="arial" SIZE="+3" COLOR="#FF0000">
This font is Arial, Size is +3, Color is Red
<
/FONT>
This font is Arial, Size is
+3, Color is Red
<FONT FACE="Times New Roman" SIZE="5" COLOR="#0000FF">
This font is Times New Roman, Size is 5, Color is Blue
<
/FONT>
This font is Times New Roman, Size is 5, Color is
Blue
<FONT FACE="courier" SIZE="2" COLOR="#800000">
This font is Courier, Size is 2, Color is Maroon
<
/FONT>
This font is Courier, Size is 2, Co lor is Maroon
<FONT FACE="Arial" SIZE="5" COLOR="#00FF00"> This <
/FONT>
<FONT FACE="Times New Roman" SIZE="7" COLOR="#FF00FF"> is <
/FONT>
<FONT FACE="Arial" SIZE="2" COLOR="#FF0000"> multi <
/FONT>
<FONT FACE="Impact" SIZE="4" COLOR="#000000"> colors, <
/FONT>
<FONT FACE="Courier" SIZE="2" COLOR="#0000FF"> multi <
/FONT>
<FONT FACE="Times New Roman" SIZE="3" COLOR="#008080"> faces,
<
/FONT>
<FONT FACE="Courier" SIZE="6" COLOR="#FFFF00"> and <
/FONT>
<FONT FACE="Arial" SIZE="5" COLOR="#808080"> multi <
/FONT>
<FONT FACE="Impact" SIZE="2" COLOR="#800000"> sizes <
/FONT>
<FONT FACE="Times New Roman" SIZE="7" COLOR="#00FFFF"> text
<
/FONT>
This is multi
colors,
multi faces, and multi
sizes
text
<FONT FACE="Impact" SIZE="6" COLOR="#000000">C <
/FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#008080">O<
/FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#FF0000">L<
/FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#0000FF">O<
/FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#800000">R<
/FONT>
<FONT FACE="Impact" SIZE="6" COLOR="#FF00FF">S<
/FONT>
C
O
L
O
R
S
BASEFONT
BODY
FONT
Name
Face
<BASEFONT Name="Arial" COLOR="#FF0000" SIZE="5">
Arial
Font
Font
BASEFONT
Text
Body
Color
BASEFONT
BASEFONT
Headings
<Hn> ... <
/Hn>
n
.
<H1> Heading 1 <
/H1>
<H2> Heading 2 <
/H2>
<H3> Heading 3 <
/H3>
<H4> Heading 4 <
/H4>
<H5> Heading 5 <
/H5>
<H6> Heading 6 <
/H6>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Head ing 6
<B> ... <
/B>
<STRONG> ... <
/STRONG>
<B> Bold Text <
/B>
This is Bold Text
<STRONG> Strong Text
<
/STRONG>
This is Strong Text
<I> ... <
/I>
<EM> ... <
/EM>
<I> Italic Text <
/I>
This is Italic Text
<EM> Emphasized Text <
/EM>
This is Emphasized Text
<U> ... <
/U>
<U> Undelined Text <
/U>
Undelined Text This is
<SUP> ... <
/SUP>
<SUP> Superscript Text
<
/SUP>
This is
Supersc ript Tex t
<SUB> ... <
/SUB>
<SUB> Subscript Text <
/SUB>
This is
Subs cri pt Text
<BIG> ... <
/BIG>
<BIG> Big Text </BIG>
This is Big Text
<SMALL> ... <
/SMALL>
<SMALL> Small Text <
/SMALL>
This is Small Text
<STRIKE> ... <
/STRIKE>
<S> ... <
/S>
<STRIKE> Striked Text
<
/SRTIKE>
This is Striked Text
<S> Striked Text <
/S>
This is Striked Text too
TeleType
<TT> ... <
/TT>
<TT> TeleType Text <
/TT>
This is TeleType Text
Monospaced Text
m,i
m
i
iiiiiiiiii
mmmmmmmmmm
TT
/TT
iiiiiiiiii
mmmmmmmmmm
<B><I><U>
This is a Bold, Italic and Underlined Text
<
/U> <
/I> <
/B>
This is a Bold, Italic and Underlined Text
<FONT COLOR="#FF0000" SIZE="+3"><U><I>
This text is red, size +3, Italic, and Underlined
<
/I> <
/U> <
/FONT>
This text is red, size +3,
Italic, and Underlined
<B><I><U>
This is a Bold, Italic and Underlined Text
<
/B> <
/I> <
/U>
<B><I><U>
This is a Bold, Italic and Underlined Text
<
/B> <
/U> <
/I>
HTML
P
BR
nbsp;
P
P
/P
ALIGN, DIR
ALIGN
Left
Center, Right
<P Align="left"> This is a left-aligned paragraph <
/P>
This is left-aligned paragraph
<P Align="right"> This is right-aligned paragraph</P>
This is a right-aligned paragraph
<P Align="center"> This is a centered paragraph</P>
This is a centered paragraph
CENTER
CENTER
<CENTER> This is a centered text </CENTER>
This is a centered text
DIR
P
LTR
(Left To
Right)
RTL
(Right To
Left)
BLOCKQUOTE
/BLOCKQUOTE
BLOCKQUOTE
/BLOCKQUOTE
<BLOCKQUOTE>
<BLOCKQUOTE>
<
/BLOCKQUOTE>
<
/BLOCKQUOTE>
A B C D
E F G H
I J K L
M N O P
Q R S T
nbsp;
BR
<PRE> ... </PRE>
Preformated
A B C D E F G H I J K L M N
O P Q R S T
HTML
Ordered Lists
Unordered Lists
<OL> ... <
/OL>
<UL> ... <
/UL>
LI
List Item
<OL>
<LI>
<LI>
<LI>
<LI>
<LI>
<LI>
<
/OL>
<UL>
<LI>
<LI>
<LI>
<LI>
<
/UL>
TYPE
UL
OL
LI
A, a, I, i
<OL TYPE="A">
<OL TYPE="a">
<OL TYPE="I">
<OL TYPE="i">
HTML
Disc
TYPE
square
circle
<UL TYPE="square">
<UL TYPE="circle">
UL
/UL
<DIR> ... <
/DIR>
<MENU> ... <
/MENU>
Definition Lists
HTML
Hyper Text Markup Language
WWW
World Wide Web
FTP
File Transfer Protocol
GIF
Graphical Interchange Format
JPG, JPEG
Joint Photographic Experts Group
DL
/DL
DT
DD
<DL>
<DT>HTML <DD>Hyper Text Markup Language
<DT>WWW <DD>World Wide Web
<DT>FTP <DD>File Transport Protocol
<DT>GIF <DD>Graphical Interchange Format
<DT>JPG, JPEG <DD>Joint Photographic Experts Group
<
/DL>
HTML
IMG
SRC
thedome.jpg
<IMG SRC="thedome.jpg">
HTML
HTML
HTML
HT
ML
images
Pixel
HEIGHT, WIDTH
<IMG SRC="thedome.jpg" HEIGHT="70" WIDTH="120">
<IMG SRC="thedome.jpg" HEIGHT="300" WIDTH="500">
IMG
ALT
<IMG SRC="thedome.jpg" ALT="The Dome Of The Rock">
ALIGN
BOTTOM, TOP
MIDDLE, LEFT,
RIGHT
BOTTOM
<IMG SRC="image.jpg" ALIGN="BOTTOM">
TOP
<IMG SRC="image.jpg" ALIGN="TOP">
MIDDLE
<IMG SRC="image.jpg" ALIGN="MIDDLE">
LEFT
<IMG SRC="image.jpg" ALIGN="LEFT">
RIGHT
<IMG SRC="image.jpg" ALIGN="RIGHT">
VSPACE
HSPACE
<IMG SRC="image.jpg" ALIGN="RIGHT" VSPACE="20" HSPACE="20">
image.jpg
ALIGN
RIGHT
IMG
BORDER
<IMG SRC="image.jpg" BORDER="5">
JPG
JPEG
ointJ
hotographicP
xpertsE
roupG
GIF
raphicalG
nterchangeI
ormatF
JPG
GIF
Transparent
Images
Animated Gifs
Paint Shop
Pro
JPG
GIF
Resolution
Windows
Pixel
Picture Element
Thumbnail
Paint Shop Pro
WIDTH, HEIGHT
HTML
Links
E-mail
<A> ... <
/A>
Anchor
HREF
http://www.sakhr.com
<A HREF="http://www.sakhr.com"> <
/A>
A
/A
Go To
SAKHR
<A HREF="http://www.sakhr.com">Go To SAKHR<
/A>
Go To SAKHR
SAKH
R
Go To <A HREF="http://www.sakhr.com">SAKHR<
/A>
KHRSAGo To
A
/A
<A HREF="http://www.sakhr.com"><IMG SRC="sakhrlgo.gif">
<
/A>
A
/A
BORDER="0"
<A HREF="http://www.sakhr.com"><IMG SRC="sakhrlgo.gif" BORDER="0"><
/A>
<A HREF="http://www.sakhr.com"><IMG SRC="sakhrlgo.gif" BORDER="6 "><
/A>
HTML
HREF
index.html
<A HREF="index.html">Main Page<
/A>
Main Page
<A HREF="nablus1.jpg"><IMG SRC="nablus_1.jpg" BORDER="0"><
/A>
nablus_1.jpg
nablus1.jpg
A
NAME
Links
A
/A
<A>LINKS<
/A>
NAME
attrib1
<A NAME="attrib1">LINKS<
/A>
htutor06.html
<A HREF="htutor06.html#attrib1">3rd Paragraph<
/A>
3rd Paragraph
MAILTO
HREF
EMAIL
<A HREF="MAILTO:yahya@palnet.com"> Email Me <
/A>
Email Me
Email
HTTP
HyperText Transfer Protocol
Email
MAILTO
FTP (File Transfer
Protocol)
News
Groups
NNTP (Network News Transfer
Protocol)
FTP
Windows95
FTP
ftp://ftp.simtel.net/pub/simtelnet/win95/
<A HREF="ftp://ftp.simtel.net/pub/simtelnet/win95/">Simtel FTP Server<
/A>
Simtel FTP Server
NEWS
alt.html
HTML
<A HREF="news:alt.html">Alt.Html<
/A>
Alt.Html
HTML
HTML
HTML
<TABLE>...<
/TABLE>
<TR>...<
/TR>
Table Row
<TD> Cell Data <
/TD>
Table Data
<TABLE> ... <
/TABLE>
<TR> ... <
/TR>
<TABLE>
<TR>
<
/TR>
<TR>
<
/TR>
<TR>
<
/TR>
<
/TABLE>
<TD> ... <
/TD>
TR
/TR
<TABLE>
<TR>
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR>
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR>
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<
/TABLE>
Data
Data
Data
Data
Data
Data
TABLE
/TABLE
BORDER
<TABLE BORDER="5">
<TABLE BORDER="0">
WIDTH
<TABLE WIDTH="600">
<TABLE WIDTH="80%">
HEIGHT
<TABLE HEIGHT="500">
<TABLE HEIGHT="100%">
CELLSPACING
<TABLE CELLSPACING="10">
CELLPADDING
<TABLE CELLPADDING="10">
ALIGN
right
left
<TABLE ALIGN="Left">
<TABLE ALIGN="Right">
BGCOLOR
<TABLE BGCOLOR="#00FFFF">
<TABLE BORDER="5">
Data
Data
Data
Data
Data
Data
<TABLE BORDER="5" CELLPADDING="5">
Data
Data
Data
Data
Data
Data
<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10">
Data
Data
Data
Data
Data
Data
<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"
BGCOLOR="#FFFF00">
Data
Data
Data
Data
Data
Data
<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"
BGCOLOR="#FFFF00" HEIGHT="300">
Data
Data
Data
Data
Data
Data
<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"
BGCOLOR="#FFFF00" HEIGHT="300" WIDTH="75%">
Data
Data
Data
Data
Data
Data
TR
/TR
ALIGN
Right, Left,
Center
Center
VALIGN
Top, Bottom, Middle
Baseline
BGCOLOR
TABLE
<TABLE BORDER="5" HEIGHT="300">
<TR ALIGN="Left">
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR ALIGN="Right">
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR ALIGN="Center">
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<
/TABLE>
Data
Data
Data
Data
Data
Data
<TABLE BORDER="5" HEIGHT="300">
<TR VALIGN="Top">
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR VALIGN="Bottom">
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR VALIGN="Baseline">
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<
/TABLE>
Data
Data
Data
Data
Data
Data
<TABLE BORDER="5" HEIGHT="300" BGCOLOR="#FFFFFF">
<TR BGCOLOR="#808080">
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR BGCOLOR="#C0C0C0">
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR>
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<
/TABLE>
Data
Data
Data
Data
Data
Data
<TABLE BORDER="0" HEIGHT="100%" WIDTH="100%">
<TR BGCOLOR="#808080">
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR BGCOLOR="#C0C0C0">
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR BGCOLOR="#FFFFFF">
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<
/TABLE>
Data
Data
Data
Data
Data
Data
HTML
TD
/TD
HTML
<TABLE>
<TR>
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR>
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR>
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<
/TABLE>
ALIGN
Left, Center, Right
VALIGN
Top, Middle, Bottom, Baseline
WIDTH
HEIGHT
BGCOLOR
COLSPAN
<TD COLSPAN="n">
n
ROWSPAN
<TD ROWSPAN="n">
n
BGCOLOR
BODY
WIDTH, HEIGHT
TABLE
<TABLE BORDER="5">
<TR>
<TD> Data <
/TD>
<
/TR>
<TR>
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR>
<TD> Data <
/TD>
<
/TR>
<
/TABLE>
Data
Data
Data
Data
COLSPAN,
ROWSPAN
<TABLE BORDER="5">
<TR>
<TD COLSPAN="2"> Data <
/TD>
<
/TR>
<TR>
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR>
<TD COLSPAN="2"> Data <
/TD>
<
/TR>
<
/TABLE>
Data
Data
Data
Data
<TABLE BORDER="5">
<TR>
<TD ROWSPAN="3"> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR>
<TD> Data <
/TD>
<
/TR>
<TR>
<TD> Data <
/TD>
<
/TR>
<
/TABLE>
Data
Data
Data
Data
TH
/TH
Table Header
TD
/TD
TD
CAPTION
/CAPTION
TABLE
<TABLE BORDER="5">
<CAPTION> Table Caption <
/CAPTION>
<TR>
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR>
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<TR>
<TD> Data <
/TD>
<TD> Data <
/TD>
<
/TR>
<
/TABLE>
Table Caption
Data
Data
Data
Data
Data
Data
HTML
Frames
Html
frame1.html, frame2.html,
frame3.html
<HTML>
<HEAD>
<TITLE>Frame1<
/TITLE>
<
/HEAD>
<BODY>
Frame 1
<
/BODY>
<
/HTML>
<FRAMESET> ... <
/FRAMESET>
BODY
/BODY
BODY
<HTML>
<HEAD>
<TITLE>Master File<
/TITLE>
<
/HEAD>
<FRAMESET>
<
/FRAMESET>
<
/HTML>
COLS
<FRAMESET
COLS="50%,50%">
<
/FRAMESET>
*
<FRAMESET
COLS="20%,50%,30%">
<
/FRAMESET>
*
<FRAMESET
COLS="200,300,*">
<
/FRAMESET>
*
<FRAMESET
COLS="200,*,15%,20%">
<
/FRAMESET>
*
<FRAMESET
COLS="150,*,2*">
<
/FRAMESET>
*
ROWS
<FRAMESET
ROWS="50%,50%">
<
/FRAMESET>
*
<FRAMESET
ROWS="20%,50%,30%">
<
/FRAMESET>
*
<FRAMESET
ROWS="50,120,*">
<
/FRAMESET>
*
<FRAMESET
ROWS="50,*,15%,20%">
<
/FRAMESET>
*
<FRAMESET
COLS="*,2*">
<
/FRAMESET>
*
FRAMESET
FRAME
BODY
IMG SRC="imagname.ext
FRAME
IMG
FRAMESET
SRC
<FRAMESET COLS="50%,50%">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<
/FRAMESET>
<FRAMESET COLS="200,400,*">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<
/FRAMESET>
<FRAMESET ROWS="50,*,15%,20%">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<FRAME SRC="frame4.html">
<
/FRAMESET>
<FRAMESET COLS="*,2*">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<
/FRAMESET>
FRAME SRC
IMG
SRC
<FRAMESET COLS="50%,50%">
<FRAME SRC="frame1.html">
<FRAME SRC="thedome.jpg">
<
/FRAMESET>
*
HTML
FRAMESET
/FRAMESET
BODY
BODY
COLS, ROWS
FRAME
SRC
<FRAMESET ROWS="100,*">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<
/FRAMESET>
HTML
FRAMESET
<FRAMESET ROWS="100,*">
<FRAME SRC="frame1.html">
<FRAMESET>
<
/FRAMESET>
<
/FRAMESET>
<FRAMESET ROWS="100,*">
<FRAME SRC="frame1.html">
<FRAMESET COLS="200,*">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<
/FRAMESET>
<
/FRAMESET>
<FRAMESET COLS="100,*,100">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<
/FRAMESET>
<FRAMESET ROWS="80,*">
<FRAME SRC="frame2.html">
<FRAME SRC="frame4.html">
<
/FRAMESET>
<FRAMESET COLS="100,*,100">
<FRAME SRC="frame1.html">
<FRAMESET ROWS="80,*">
<FRAME SRC="frame2.html">
<FRAME SRC="frame4.html">
<
/FRAMESET>
<FRAME SRC="frame3.html">
<
/FRAMESET>
HTML
FRAMESET
BODY
FRAME
FRAMESET
Netscape, MS
Explorer
FRAMEBORDER
<FRAMESET ROWS="50,*,15%,20%" FRAMEBORDER="0">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<FRAME SRC="frame4.html">
<
/FRAMESET>
*
BORDER
BORDER="n"
Netscape
BORDERCOLOR
BORDERCOLOR="rrggbb"
Netscape
FRAMESPACING
FRAMESPACING="n"
MS Explorer
FRAME
MARGINHEIGHT
MARGINHEIGHT="n"
MARGINWIDTH
MARGINWIDTH="n"
SCROLLING
yes
no
auto
Windows
SCROLLING="yes"
SCROLLING="no"
SCROLLING="auto"
NORESIZE
NORESIZE
<FRAMESET COLS="50%,50%">
<FRAME SRC="thedome.jpg" MARGINHEIGHT="40">
<FRAME SRC="frame2.html">
</FRAMESET>
*
<FRAMESET COLS="50%,50%">
<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30">
<FRAME SRC="frame2.html">
</FRAMESET>
*
<FRAMESET COLS="50%,50%">
<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30"
SCROLLING="yes">
<FRAME SRC="frame2.html">
</FRAMESET>
*
<FRAMESET COLS="50%,50%">
<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30"
SCROLLING="yes" NORESIZE>
<FRAME SRC="frame2.html">
</FRAMESET>
*
FRAMEBORDER, FRAMESPACING, BORDER,
BORDERCOLOR
FRAMESET
NAME
<NOFRAMES> ... <
/NOFRAMES>
Netscape, MS
Explorer
<HTML>
<HEAD>
<TITLE>Main File<
/TITLE>
<
/HEAD>
<FRAMESET ROWS="50,*,15%,20%" FRAMEBORDER="0">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<FRAME SRC="frame4.html">
<
/FRAMESET>
<NOFRAMES>
<BODY>
<
/BODY>
<
/NOFRAMES>
<
/HTML>
HTML
NAME
FRAME
BACK
mainfile.html
<HTML>
<HEAD>
<TITLE>Main File<
/TITLE>
<
/HEAD>
<FRAMESET ROWS="60,*">
<FRAME SRC="header.html" NORESIZE SCROLLING="NO"
MARGINHEIGHT="1" MARGINWIDTH="1">
<FRAMESET COLS="120,*">
<FRAME SRC="lftframe.html" NORESIZE SCROLLING="NO"
MARGINHEIGHT="1" MARGINWIDTH="1">
<FRAME SRC="htmintro.html">
<
/FRAMESET>
<
/FRAMESET>
<
/HTML>
header.html
<HTML>
<HEAD>
<TITLE>Header File<
/TITLE>
<
/HEAD>
<BODY bgcolor="#BCD8EB">
<CENTER><IMG SRC="frambnr.jpg"><
/CENTER>
<
/BODY>
<
/HTML>
lftframe.html
<HTML>
<HEAD>
<TITLE>Buttons<
/TITLE>
<
/HEAD>
<BODY BGCOLOR="#BCD8EB">
<A HREF="htutor01.html"><IMG SRC="lesson1.jpg"></A><BR>
<A HREF="htutor02.html"><IMG SRC="lesson2.jpg"></A><BR>
<A HREF="htutor03.html"><IMG SRC="lesson3.jpg"></A><BR>
<A HREF="htutor04.html"><IMG SRC="lesson4.jpg"></A><BR>
<A HREF="htutor05.html"><IMG SRC="lesson5.jpg"></A><BR>
<
/BODY>
<
/HTML>
htmintro.html
NAME
A
/A
TARGET
NAME
FRAME
FRAME
mainwindow
<HTML>
<HEAD>
<TITLE>Main File<
/TITLE>
<
/HEAD>
<FRAMESET ROWS="60,*">
<FRAME SRC="header.html" NORESIZE SCROLLING="NO"
MARGINHEIGHT="1" MARGINWIDTH="1">
<FRAMESET COLS="120,*">
<FRAME SRC="lftframe.html" NORESIZE SCROLLING="NO"
MARGINHEIGHT="1" MARGINWIDTH="1">
<FRAME SRC="htmintro.html" NAME="mainwindow">
<
/FRAMESET>
<
/FRAMESET>
<
/HTML>
TARGET
lftframe.html
<HTML>
<HEAD>
<TITLE>Buttons<
/TITLE>
<
/HEAD>
<BODY BGCOLOR="#BCD8EB">
<A HREF="htutor01.html" TARGET="mainwindow"><IMG
SRC="lesson1.jpg"></A><BR>
<A HREF="htutor02.html" TARGET="mainwindow"><IMG
SRC="lesson2.jpg"></A><BR>
<A HREF="htutor03.html" TARGET="mainwindow"><IMG
SRC="lesson3.jpg"></A><BR>
<A HREF="htutor04.html" TARGET="mainwindow"><IMG
SRC="lesson4.jpg"></A><BR>
<A HREF="htutor05.html" TARGET="mainwindow"><IMG
SRC="lesson5.jpg"></A><BR>
<
/BODY>
<
/HTML>
<A HREF="filename.html" TARGET="mainwindow"> ... </A>
<A HREF="filename.html"> ... </A>
HTML
TARGET
_top
HTML
mainwindow
_top
HTML
lowercase
_top
_blank
_self
_parent
FRAMESET
/FRAMESET
_parent
_top
_top
<A HREF="mainfile.html" TARGET="_top"><IMG
SRC="mainpage.jpg"></A><BR>
<A HREF="htmintro.html" TARGET="_top"><IMG
SRC="noframes.jpg"></A><BR>
HTML
HTML
Horizontal Rule
HR
<HR>
SIZE
<HR SIZE="5">
<HR SIZE="1">
<HR SIZE="10">
WIDTH
<HR WIDTH="80%">
<HR WIDTH="400">
<HR SIZE="5" WIDTH="60%">
ALIGN
center, left, right
<HR WIDTH="80%" ALIGN="center">
<HR WIDTH="400" ALIGN="left">
<HR SIZE="5" WIDTH="60%" ALIGN="right">
NOSHADE
<HR SIZE="5" WIDTH="60%" ALIGN="center" NOSHADE>
COLOR
MS Explorer
<HR SIZE="5" WIDTH="60%" ALIGN="center" COLOR="#FF0000" NOSHADE>
This is line one<BR>
<!-- This is line two --><BR>
and, this is line three<BR>
This is line one
and, this is line three
BR
CLEAR
ALIGN
right
left
bottom
ALIGN
CLEAR
right
ALIGN
right
left
left
all
RIGHT
<IMG SRC="image.jpg" ALIGN="RIGHT">
<BR CLEAR="right">
BR
CLEAR="right"
left
RIGHT
<IMG SRC="image.jpg" ALIGN="RIGHT">
<BR CLEAR="left">
BR
CLEAR="left"
left
left
LEFT
<IMG SRC="image.jpg" ALIGN="LEFT">
<BR CLEAR="left">
all
<NOBR> ... <
/NOBR>
NO
BReak
HTML
HTML
Paint Shop Pro
<IMG SRC="flowers.jpg" WIDTH="320" HEIGHT="310" BORDER="0"
>
IMG
USEMAP="#map_name"
map_name
ourmap
<IMG SRC="flowers.jpg" WIDTH="320" HEIGHT="310" BORDER="0"
USEMAP="#ourmap"
>
ourmap
<MAP NAME="ourmap">
...
<
/MAP>
HTML
AREA
<MAP NAME="ourmap">
<AREA>
<AREA>
<AREA>
<AREA>
<
/MAP>
SHAPE
COORDS
HREF
SH
APE
RECT
CIRCLE
POLY
<MAP NAME="ourmap">
<AREA SHAPE="poly">
<AREA SHAPE="rect">
<AREA SHAPE="circle">
<AREA SHAPE="poly">
<
/MAP>
COORDS
<MAP NAME="ourmap">
<AREA SHAPE="poly" COORDS="10,10,130,10,110,65,10,140">
<AREA SHAPE="rect" COORDS="28,255,310,300">
<AREA SHAPE="circle" COORDS="140,160,175">
<AREA SHAPE="poly" COORDS="150,10,300,20,315,230">
<
/MAP>
HREF
<MAP NAME="ourmap">
<AREA SHAPE="poly" COORDS="10,10,130,10,110,65,10,140"
HREF="http://www.sakhr.com">
<AREA SHAPE="rect" COORDS="28,255,310,300"
HREF="http://www.ayna.com">
<AREA SHAPE="circle" COORDS="140,160,175"
HREF="http://www.pcmag-arabic.com">
<AREA SHAPE="poly" COORDS="150,10,300,20,315,230"
HREF="http://www.asp.com.lb">
<
/MAP>
<IMG SRC="flowers.jpg" WIDTH="320" HEIGHT="310" BORDER="0"
USEMAP="#ourmap"
>
<MAP NAME="ourmap">
<AREA SHAPE="poly" COORDS="10,10,130,10,110,65,10,140"
HREF="http://www.sakhr.com">
<AREA SHAPE="rect" COORDS="28,255,310,300"
HREF="http://www.ayna.com">
<AREA SHAPE="circle" COORDS="140,160,175"
HREF="http://www.pcmag-arabic.com">
<AREA SHAPE="poly" COORDS="150,10,300,20,315,230"
HREF="http://www.asp.com.lb">
<
/MAP>
MAP
/MAP
USEMAP
USEMAP
BODY
/BODY
USEMAP="#map_name"
Live Image
Mediatec
HTML
HTML
HTML
JavaScript, CGI
HTML
HTML
Text
Option 1
1 2 3
<FORM> ... <
/FORM>
ACTION
Email
CGI
Server
<FORM ACTION="mailto:someone@domain.com"> ... <
/FORM>
<FORM ACTION="name_and_address_of_CGI_script"> ... <
/FORM>
METHOD
ACTION
GET
Server
Post
<FORM ACTION="mailto:someone@domain.com" METHOD="post"> ...
<
/FORM>
<FORM ACTION="name_and_address_of_CGI_script" METHOD="get"> ...
<
/FORM>
ENCTYPE
application/x-www-form-urlencoded
text/plain
MIME
purpose-ultiM
nternetI
ailM
xtentionsE
text/plain
NAME=Yahya Al-Sharif
Address=Nablus , Palestine
Email=yahya@palnet.com
Name
Address, Email
application/x-www-form-urlencoded
NAME=Yahya+Al-
Sharif&Address=Nablus+,+Palestine&Email=yahya@palnet.com
Formaters
text/plain
UrlCook
<FORM ACTION="mailto:email@domain.com" METHOD="post"
ENCTYPE="text/plain">
...
<
/FORM>
INPUT
Sindbad 3.x
Netscape
Please enter your address:
Nablus, Palestine
INPUT
TYPE
TEXT
<FORM ...
>
<INPUT TYPE="text">
<
/
FORM>
TYPE
SELECT
TEXTAREA
<INPUT TYPE="text">
<INPUT TYPE="password">
<INPUT TYPE="hidden">
<INPUT TYPE="radio">
<INPUT TYPE="checkbox">
<INPUT TYPE="submit">
<INPUT TYPE="reset">
<INPUT TYPE="button">
TYPE
INPUT
NAME
address
<FORM ...
>
<INPUT TYPE="text" NAME="address">
<
/
FORM>
Please
enter your address
NAME
<FORM ...>
Please enter your address :
<INPUT TYPE="text" NAME="address">
<
/
FORM>
Please enter your address :
Nablus, Palestine
VALUE
<FORM ...>
Please enter your address :
<INPUT TYPE="text" NAME="address"
VALUE="Nablus, Palestine">
<
/
FORM>
Please enter your address :
Nablus, Palestine
SIZE
<FORM ...>
Please enter your address :
<INPUT TYPE="text" NAME="address"
VALUE="Nablus, Palestine" SIZE="40">
<
/
FORM>
Please enter your address :
Nablus, Palestine
Please enter your address :
Nablus, Palestine
SIZE
MAXLENGTH
<FORM ...>
Please enter your address :
<INPUT TYPE="text" NAME="address"
VALUE="Nablus, Palestine"
SIZE="40" MAXLENGTH="30">
<
/
FORM>
Please enter your address :
Nablus, Palestine
INPUT
TYPE
NAME
VALUE
SIZE
MAXLENGTH
password
text
<FORM ...>
Please enter your name :
<INPUT TYPE="text" NAME="the name" VALUE="" SIZE="40"
MAXLENGTH="30">
Please enter your passwod :
<INPUT TYPE="password" NAME="the password" VALUE="" SIZE="40"
MAXLENGTH="30">
<
/
FORM>
Please enter your name :
Please enter your password :
VALUES
hidden
<FORM ...>
Please enter your name :
<INPUT TYPE="text" NAME="the name" VALUE="" SIZE="40"
MAXLENGTH="30">
<INPUT TYPE="hidden" NAME="my forms" VALUE="form1">
Please enter your passwod :
<INPUT TYPE="password" NAME="the password" VALUE="" SIZE="40"
MAXLENGTH="30">
<
/
FORM>
Please enter your name :
Please enter your passwod :
<INPUT TYPE="hidden" NAME="my forms" VALUE="form1">
<INPUT TYPE="hidden" NAME="my forms" VALUE=" form2">
<INPUT TYPE="hidden" NAME="my forms" VALUE=" form3">
my forms=form1
my forms=form2
my forms=form3
<FORM ...>
<TABLE BORDER="0">
<TR>
<TD>Please enter your name : <
/TD>
<TD>
<INPUT TYPE="text" NAME="the name" VALUE="" SIZE="40"
MAXLENGTH="30">
<
/
TD>
<
/TR>
<TR>
<TD>Please enter your password :<
/TD>
<TD>
<INPUT TYPE="password" NAME="the password" VALUE="" SIZE="40"
MAXLENGTH="30">
<
/TD>
<
/
TR>
<
/TABLE>
<
/
FORM>
Please enter your name :
Please enter your password :
HTML
Text, Password, Hidden
Radio
Checkbox
RADIO
RADIO
Sindbad 3.0
Sindbad 3.0
Sindbad 4.0
Ms Explorer 3.0
Ms Explorer 4.0
<FORM>
<
/FORM>
INPUT
<FORM>
<INPUT TYPE="radio">
<
/FORM>
<FORM>
<INPUT TYPE="radio"> <BR>
<INPUT TYPE="radio"> <BR>
<INPUT TYPE="radio"> <BR>
<INPUT TYPE="radio"> <BR>
<
/FORM>
NAME
browser
<FORM>
<INPUT TYPE="radio" NAME="browser"> <BR>
<INPUT TYPE="radio" NAME="browser"> <BR>
<INPUT TYPE="radio" NAME="browser"> <BR>
<INPUT TYPE="radio" NAME="browser"> <BR>
<
/FORM>
browser
VALUE
<FORM>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind3"> <BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind4"> <BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie3"> <BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie4"> <BR>
<
/FORM>
<FORM>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind3"> Sindbad 3.0 <BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind4"> Sindbad 4.0<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie3"> MS Explorer 3.0<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie4"> MS Explorer 4.0<BR>
<
/FORM>
Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0
CHECKED
<FORM>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind3"> Sindbad 3.0 <BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Sind4" CHECKED>
Sindbad 4.0
<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie3"> MS Explorer 3.0<BR>
<INPUT TYPE="radio" NAME="browser" VALUE="Msie4"> MS Explorer 4.0<BR>
<
/FORM>
Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0
browser=Msie3
CHECKBOX
Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0
CHECKBOX
RADIO
RADIO
<FORM>
<INPUT TYPE="checkbox" NAME="Sind3" VALUE="Yes"> Sindbad 3.0 <BR>
<INPUT TYPE="checkbox" NAME="Sind4" VALUE="Yes"> Sindbad 4.0 <BR>
<INPUT TYPE="checkbox" NAME="Msie3" VALUE="Yes"> MS Explorer 3.0
<BR>
<INPUT TYPE="checkbox" NAME="Msie4" VALUE="Yes"> MS Explorer 4.0
<BR>
<
/FORM>
checkbox
TYPE
NAME
VALUE
RADIO
CHECKBOX
RADIO
CHECKBOX
Sind4=Yes
Msie4=Yes
RADIO
CHECKED
<FORM>
<INPUT TYPE="checkbox" NAME="Sind3" VALUE="Yes" CHECKED>
Sindbad 3.0
<BR>
<INPUT TYPE="checkbox" NAME="Sind4" VALUE="Yes"> Sindbad 4.0 <BR>
<INPUT TYPE="checkbox" NAME="Msie3" VALUE="Yes" CHECKED>
MS Explorer 3.0
<BR>
<INPUT TYPE="checkbox" NAME="Msie4" VALUE="Yes"> MS Explorer 4.0
<BR>
<
/FORM>
Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0
INPUT
<SELECT>
<OPTION>
<OPTION>
<OPTION>
.....
.....
<
/SELECT>
SELECT
SELECT
OPTION
<FORM>
<SELECT>
<OPTION> Sindbad 3.0
<OPTION> Sindbad 4.0
<OPTION> MS Explorer 3.0
<OPTION> MS Explorer 4.0
<
/SELECT>
<
/FORM>
Sindbad 3.0
SELECT
NAME
SIZE
<FORM>
<SELECT NAME="browser" SIZE="2">
<OPTION> Sindbad 3.0
<OPTION> Sindbad 4.0
<OPTION> MS Explorer 3.0
<OPTION> MS Explorer 4.0
<
/SELECT>
<
/FORM>
Sindbad 3.0
Sindbad 4.0
MULTIPLE
SIZE
<FORM>
<SELECT NAME="browser" SIZE="4" MULTIPLE>
<OPTION> Sindbad 3.0
<OPTION> Sindbad 4.0
<OPTION> MS Explorer 3.0
<OPTION> MS Explorer 4.0
<
/SELECT>
<
/FORM>
Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0
ctrl
OPTION
VALUE
SELECTED
OPTION
<FORM>
<SELECT NAME="browser" SIZE="4" MULTIPLE>
<OPTION VALUE="Sindbad 3.0"> Sindbad 3.0
<OPTION VALUE="Sindbad 4.0" SELECTED> Sindbad 4.0
<OPTION VALUE="MS Explorer 3.0"> MS Explorer 3.0
<OPTION VALUE="MS Explorer 4.0"> MS Explorer 4.0
<
/SELECT>
<
/FORM>
Sindbad 3.0
Sindbad 4.0
MS Explorer 3.0
MS Explorer 4.0
TEXTAREA
<TEXTAREA> ... <
/TEXTAREA>
NAME
VALUE
<TEXTAREA NAME="comments">
Hello, please write your comments here :-)
<
/TEXTAREA>
Hello, please w rite your comments here :-)
COLS
ROWS
<TEXTAREA NAME="comments" COLS="30" ROWS="6">
<
/TEXTAREA>
WRAP
MS Explorer
virtual
<TEXTAREA NAME="comments" COLS="30" ROWS="6" WRAP="virtual">
<
/TEXTAREA>
physical
<TEXTAREA NAME="comments" COLS="30" ROWS="6" WRAP="physical">
<
/TEXTAREA>
off
<TEXTAREA NAME="comments" COLS="30" ROWS="6" WRAP="off">
<
/TEXTAREA>
INPUT
submit
<INPUT TYPE="submit">
Submit
Submit Query
Netscape
VALUE
<INPUT TYPE="submit" VALUE="Press here to send the form">
Press here to send the form
reset
TYPE
INPUT
submit
<INPUT TYPE="reset" VALUE="Forget about it">
Forget about it
INPUT
button
JavaScript
reset, submit
<INPUT TYPE="button" VALUE="This is a sample button">
HTML
Best Viewed with Netscape Navigator
Best Viewed with MS Internet
Explorer
HTML
Browser Specific Tags
UL
TYPE
Plugin
Sindbad
3.x
Ms Internet Explorer 3.x
3.x
HTML
MS Explorer 1
Netscape Navigator
MS Explorer 2
HTML
Scanner
Scanner
Netscape
MS Internet Explorer
<HTML>
<HEAD>
<TITLE> ... <
/TITLE>
<
/HEAD>
<BODY>
....
<
/BODY>
<
/HTML>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-
1256">
HEAD
/HEAD
TITLE
/TITLE
<HTML>
<HEAD>
<TITLE> ... <
/TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-
1256 ">
<
/HEAD>
<BODY>
....
<
/BODY>
<
/HTML>
charset=windows-1256
Code Page
DOS
Windows-1256, DOS-720
ISO-8859-6
Windows-1256
charset=windows-1256
MS
Explorer
Bi-
Directional
BiDi
P
DIR
rtl
ltr
<P DIR="rtl" ALIGN="right"> ... <
/P>
<P DIR="ltr" ALIGN="left"> ... <
/P>
DIR
ALIGN
Plugin
Netscape
DIR
DIR
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=windows-1256">
<P DIR="rtl" ALIGN="right"> ... <
/P>
<P DIR="ltr" ALIGN="left"> ... <
/P>
OXFD
ALT
ALT+0253
META
HTML
HTML
Build it, and they will come
HTML
HTML
HTML
Yahoo
Altavista
Search Engines
Altavista
Crawlers
Spiders
Directories
Yahoo
Yahoo
Regional: Regions: Middle East: Countries and Regions: Palestinian Authority:
Cities and Regions: Nablus
Regional
Region
Middle East
Altavista
META
HEAD
/HEAD
Altavista, Hotbot, Infoseek
Yahoo
HTML
META
HTTP-EQUIV
<HEAD>
.
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-
1256">
NAME
CONTENT
Server Side
Client
Side
HTTP-EQUIV...
Content-Type
Content
text/html
HTML
Windows-
1256 ...
.
NAME
keywords
<META NAME="keywords" ... >
Content
<META NAME="keywords"CONTENT="html,webpage design,psp,paint shop
pro,arabic site">
<META NAME="keywords"CONTENT="html,html,html,html,webpage
design,psp,paint shop pro,arabic site">
description
<META NAME="description" CONTENT="Html and Paint Shop Pro tutorials in
Arabic,learning web page design in Arabic">
author
<META NAME="author" CONTENT="Abu Al-Abed">
copyright
<META NAME="copyright" CONTENT="....">
META
<HEAD>
<TITLE> ... <
/TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-
1256">
<META NAME="keywords" CONTENT=" ... ">
<META NAME="description" CONTENT=" ... ">
<META NAME="author" CONTENT=" ... ">
<META NAME="copyright" CONTENT=" ... ">
<
/HEAD>
Altavista
Add Page
Infoseek
Excite
HotBot
Add URL
Yahoo
How
To Suggest a
Site
AddWeb
Submission Wizard
